<template>
  <div class="navbar">
    <div class="logo">
      <img src="../../assets/icon/logo.png"/>
    </div>
    <div>
      <p>
        请输入搜索内容
        <van-icon class="search" name="search" />
      </p>
    </div>
    <div>
      <img :src="img_url" @click="$router.push('/edit')" v-if="img_url">
      <img src="../../../src/assets/icon/头像.png" @click="$router.push('/login')" v-else>
      <p>下载&nbsp;App</p>
    </div>
  </div>
</template>

<script>
    export default {
        data(){
          return{
            img_url:''
          }
        },
      async mounted() {
        if(localStorage.getItem('token')){
          const res=await this.$http.get('/user/'+localStorage.getItem('id'))
          this.img_url=res.data[0].user_img
        }
      }
    }
</script>

<style scoped lang="less">
  .navbar{
    height: 12vw;
    background-color: white;
    display: flex;
    width: 100vw;
    .logo{
      width: 12.33vw;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 1vw;
      img{
        width: 90%;
      }
    }
  }
  div:nth-child(2){
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    p{
      height: 6.389vw;
      background-color: #f4f4f4;
      width: 80%;
      border-radius: 3.611vw  ;
      position: relative;
      color: #aaa;
      font-size: 3.33vw;
      line-height: 7.222vw;
      padding-left: 6.944vw;
      .search{
        position: absolute;
        left:2.228vw;
        top: 2.228vw;
      }
    }
  }
  div:nth-child(3){
    display: flex;
    justify-content: center;
    align-items: center;
    img{
      width: 6.4vw;
      height: 6.4vw;
    }
    p{
      padding: 1.33vw 2.67vw;
      color: white;
      background-color: #fb7299;
      margin: 0 2.13vw;
      font-size: 3.47vw;
      border-radius: 0.8vw;
    }
  }
</style>
